(function () {
    let timer
	$.ajax({
		url: "http://chst.vip:1234/api/getbaicaijiatitle",
	}).then((res) => {
		$("nav ul").width(res.result.length * 1.87 + "rem");
		let html = res.result.reduce((value, item) => {
			return (
				value +
				`
                <li titleid=${item.titleId}>${item.title}</li>
            `
			);
		}, "");
		$("nav ul").html(html);
		$("nav ul li").click(clickHandler);
		getData(0);
	});

	function animation(total) {
        let add=$('.add').html()
        add++
        $('.add').html(add)

        if(add===total){
            clearInterval(timer)
        }

        let reduce=$('.reduce').html()
        reduce--
        $('.reduce').html(reduce)

        if(reduce===0){
            clearInterval(timer)
        }

        let prop=add/total
        let w=$('.bar').width()

        $('.bar-in').width(w*prop).html(Math.trunc(prop*100)+"%")
    }

	function clickHandler() {
		$(this).css({ color: "red" }).siblings().css({ color: "black" });
		getData($(this).attr("titleid") * 1);
	}

	function getData(titleid) {
		$.ajax({
			url: `http://chst.vip:1234/api/getbaicaijiaproduct?titleid=${titleid}`,
		}).then((res) => {
			let html = res.result.reduce((value, item) => {
                let random=Math.trunc(Math.random()*250)
				return (
					value +
					`
                <li productid=${item.productId}>
                    ${item.productImg}
                    <div class="fr">
                        <h4>${item.productName}</h4>
                        <div class="price">
                            ${item.productPrice}
                        </div>
                        <div class="process">
                        <div class="bar">
                        <div class="bar-in">
                            0%
                        </div>
                    </div>
                    <div class="rest">已领<span class="add">0</span>/剩余<span class='reduce'>${random}</span></div>
                        </div>
                        <div class="down">
                            ${item.productCoupon}
                            ${item.productHref}
                        </div>
                    </div>
            </li>
                `
				);
			}, "");

			$(".info").html(html);
            let total=$('.reduce').html()
             timer=setInterval(animation,50,total)

		});
	}
})();
